<template>
  <page-header-wrapper :title="false">
    <a-card title="已审核发票列表">
      <a-tabs type="card" @change="onTabs">
        <a-tab-pane key="20" tab="组审已审"></a-tab-pane>
        <a-tab-pane key="40" tab="已开票"></a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="客户名称">
                <!--                <a-auto-complete-->
                <!--                  v-model="queryParam['filter[customer_name]']"-->
                <!--                  :data-source="dataSource"-->
                <!--                  style="width: 200px"-->
                <!--                  placeholder="输入合同编号"-->
                <!--                />-->
                <a-input v-model="queryParam['filter[customer_name]']" placeholder="输入客户姓名" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="输入合同编号" />
              </a-form-item>
            </a-col>
            <!--            <a-col :md="6" :sm="24">-->
            <!--              <a-form-model-item label="业务编号">-->
            <!--                <a-input v-model="queryParam['filter[sb_name]']" placeholder="输入商标名称" />-->
            <!--              </a-form-model-item>-->
            <!--            </a-col>-->
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="联系电话">
                  <a-input v-model="queryParam['filter[phone]']" placeholder="输入联系电话" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="创建时间">
                  <a-range-picker v-model="queryParam['open_time_start']" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="审核时间">
                  <a-range-picker v-model="queryParam['open_time_start']" />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="invoiceColumns"
        :data="invoiceData"
      >
        <template slot="contract_no" slot-scope="text,record">
          {{text}}<br>
          {{record.created_at}}
        </template>
        <template slot="tm_name" slot-scope="text,record">
          {{text}}{{record.pt_name}}
        </template>
        <template slot="invoice_type" slot-scope="text">
          <a-tag v-if="text == 20" color="red">{{typeOpts[text]}}</a-tag>
          <a-tag v-if="text == 10" color="blue">{{typeOpts[text]}}</a-tag>
        </template>
        <template slot="header_type" slot-scope="text">
          <a-tag color="red">{{headerOpts[text]}}</a-tag>
        </template>
        <template slot="amount" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="status" slot-scope="text">
          <a-tag color="red">{{statusOpts[text]}}</a-tag>
        </template>
        <template slot="company_name" slot-scope="text,record">
          {{text}}({{record.tax_point}}%)
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button size="small" type="primary" @click="$router.push({ name: 'InvoiceDetail', params: { id: record.id } })">查看</a-button>
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/invoice'
import { getInvoiceList } from '@/api/invoice'

export default {
  components: {
    STable
  },
  name: 'InvoiceList',
  data () {
    return {
      invoiceColumns: col.invoice,
      invoiceData: parameters => {
        return getInvoiceList(Object.assign(parameters, this.queryParam)).then(res => {
          this.typeOpts = res.result.invoice_type_opts
          this.statusOpts = res.result.status_opts
          this.headerOpts = res.result.header_type_opts
          return res.result
        })
      },
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      visible: false,
      queryParam: {},
      typeOpts: {},
      statusOpts: {},
      headerOpts: {},
      advanced: true
    }
  },
  created () {
    this.queryParam['filter[status]'] = 20
  },
  methods: {
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters) {
      clearFilters()
    },
    toDetail (id) {
      this.$router.push({ name: 'InvoiceDetail', params: { id } })
    },
    addModal () {
      this.visible = true
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearch () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.invoiceForm)
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.invoiceForm = {}
      this.helpText = ''
      this.visible = false
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleChange (value) {
      if (value === '1') {
        this.helpText = '当前公司税点为:3%,余票:40'
      }
      if (value === '2') {
        this.helpText = '当前公司税点为:6%,余票:100'
      }
    },
    onTabs (key) {
      this.queryParam['filter[status]'] = key
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped>

</style>
